<template>
  <div>
    <div class="tool-bar">
      <a-space>
        <a-button @click="getList" type="primary">获取数据</a-button>
      </a-space>
      <a-space>
        <a-button @click="handleAdd">新增</a-button>
        <a-button>导入</a-button>
        <a-button>导出</a-button>
      </a-space>
    </div>
    <a-table
      :columns="columns"
      :data-source="data"
      :loading="loading"
      size="middle"
    >
      <span slot="customTitle"><a-icon type="up-square" /> 姓名</span>
      <!-- 姓名 -->
      <template slot="name" slot-scope="text">{{ text }}</template>
      <template slot="gender" slot-scope="text">
        <span>{{ formatGender(text) }}</span>
      </template>
      <span slot="action" slot-scope="text, record">
        <a-button type="link" @click="handleEdit(record)"> 编辑 </a-button>
        <a-button type="link" @click="handleDetails(record)"> 详情 </a-button>
        <a-button type="link" @click="handleDelete(record)"> 删除 </a-button>
      </span>
    </a-table>

    <WtDetails ref="wtDetails" />

    <AddOrEdit ref="addOrEdit" />
  </div>
</template>
<script>
import { sleep } from '@/utils'
import WtDetails from './components/details/index.vue'
import AddOrEdit from './components/addOrEdit/index.vue'
/**
 * 功能：
 * 自定义表头
 * 字典数据渲染
 *
 * 姓名-年龄-性别-操作
 */

const genderOptions = [
  {
    label: '男',
    value: '0'
  },
  {
    label: '女',
    value: '1'
  }
]
const columns = [
  {
    dataIndex: 'name',
    key: 'name',
    slots: { title: 'customTitle' },
    scopedSlots: { customRender: 'name' }
  },
  {
    title: '年龄',
    width: 100,
    dataIndex: 'age',
    key: 'age',
    slots: { title: 'wtAge' }
  },
  {
    title: '性别',
    dataIndex: 'gender',
    key: 'gender',
    scopedSlots: { customRender: 'gender' }
  },
  {
    title: 'Action',
    key: 'action',
    scopedSlots: { customRender: 'action' }
  }
]
export default {
  components: {
    WtDetails,
    AddOrEdit
  },
  data() {
    return {
      loading: false,
      data: [],
      columns
    }
  },
  created() {
    this.getList()
  },
  methods: {
    async getList() {
      this.loading = true
      await sleep(1000) // todo 模拟请求
      this.loading = false
      this.data = []
      for (let i = 0; i < 5; i++) {
        this.data.push({
          key: i,
          name: 'Test' + i,
          age: i,
          gender: (i % 2) + ''
        })
      }
    },
    handleAdd() {
      this.$nextTick(() => {
        this.$refs.addOrEdit.init()
      })
    },
    handleEdit(record) {
      this.$nextTick(() => {
        this.$refs.addOrEdit.init(record)
      })
    },
    handleDetails(record) {
      this.$nextTick(() => {
        this.$refs.wtDetails.init(record)
      })
    },
    handleDelete(record) {},
    formatGender(val) {
      return genderOptions.find(item => item.value === val)?.label
    },
    test() {
      this.$message.success('This is a success message')
      /* this.loading = true
      setTimeout(() => {
        this.loading = false
        this.data = [
          {
            key: '1',
            name: 'John Brown',
            age: 32,
            address: 'New York No. 1 Lake Park',
            tags: ['nice', 'developer']
          }
        ]
      }, 3000) */
    }
  }
}
</script>
<style scoped lang="scss">
.tool-bar {
  display: flex;
  justify-content: space-between;
  padding-bottom: 16px;
  border-bottom: 1px solid #ccc;
}
</style>
